import React, { ReactElement,useState } from 'react'
import { Switch, Route, Redirect, Link ,useHistory} from "react-router-dom";
import { Layout, Menu, Breadcrumb, Popconfirm, message } from 'antd';
import {useDispatch} from "react-redux"
import NavMenus from '../../components/Menus';
import Logo from "../../assets/images/logo.png"
import storageUtils from "../../utils/storageUtils"
import './index.less'
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
  } from '@ant-design/icons';
// import MyBreadcrumb from '../../components/MyBreadcrumb';

import User from "../system/user.jsx"
import Menus  from "../system/menu.jsx"
import Role from "../system/role.jsx"
import Dist from "../system/dist"
import Systemlog from "../monitor/systemlog"
import Online from "../monitor/online"
import Charge from "../gen/charge.jsx"
import Apply from "../gen/apply.jsx"
import Complain from "../gen/complain"
import Shop from "../gen/shop.jsx"

//服务项目-类别管理组件的引入
import Category from '../serve/category'
//商品部分
import GoodsType from '../goods/goodsType'
const { Header, Content, Sider } = Layout;

interface Props {
    
}

export default function Home({}: Props): ReactElement {
  const dispatch = useDispatch();
  const history = useHistory();
  const userInfo = storageUtils.getStorage("userInfo")
  // const imgSrc = "http://xawn.f3322.net:8012/images" + userInfo.avatar
  const imgSrc = userInfo.avatar
  const username = userInfo.username
    const [flag,setFlag]  = useState(false)
      const toggle = () => {
        setFlag(!flag)
      };

  const confirm = () => {
  storageUtils.removeStorage("token");
  storageUtils.removeStorage("userInfo");
  message.success('已退出登录');
        dispatch({ type: "initUser", payload: { token:"", user:null,messages:"" } });
  history.replace("/login");
}

const cancel = () => {
  message.warn('已取消退出');
}

    return (
        <Layout style={{ height: "100vh" }}>
        <Sider trigger={null} collapsible collapsed={flag}>
          <div className="logo" style={{margin:"20px 25px",display:"flex",justContent:"start"}}>
                    <img src={Logo} alt="" style={{width:"32px",height:"15.2px",margin:"10px 0px 10px 0"}}/>
                <span  className={!flag?"":"showLogo"} style={{color:"#ffffff",fontWeight:"bold",fontSize:"20px",paddingLeft:"16px",whiteSpace: "nowrap",overflow:"hidden"}}>赤兔养车</span>
          </div>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <NavMenus flag={flag}></NavMenus>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: "0px 20px" ,backgroundColor:"#ffffff"}}>
            {React.createElement(flag ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick:toggle,
            })}
            <span className="user">
            <img src={imgSrc} alt="" />
            <span><Popconfirm
    title="是否要退出登录？"
    onConfirm={confirm}
    onCancel={cancel}
    okText="Yes"
    cancelText="No"
  >
    <span style={{cursor:"pointer"}}>{username}</span>
  </Popconfirm></span>
            </span>
          </Header>
          <Content
            className="site-layout-background box-content"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
              backgroundColor:"#ffffff"
            }}
          >
            <Switch>


                                <Redirect exact from="/home" to="/home"></Redirect>
                                <Route path="/home/system/user" component={User} />
                                <Route path="/home/system/role" component={Role} />
                                <Route path="/home/system/dist" component={Dist} />
                                <Route path="/home/system/Menus" component={Menus} />
                                <Route path="/home/monitor/systemlog" component={Systemlog} />
                                <Route path="/home/monitor/online" component={Online} />
                                <Route path="/home/gen/charge" component={Charge} />
                                <Route path="/home/gen/apply" component={Apply} />
                                <Route path="/home/gen/complain" component={Complain} />
                                <Route path="/home/gen/shop" component={Shop} />
                                <Route path="/home/serve/category" component={Category} />
                                <Route path="/home/goods/goodsType" component={GoodsType} />
                            </Switch>

          </Content>
        </Layout>
      </Layout>
    )
}
